import React, { useState } from 'react';
import logo from './logo.svg';
import Button from './components/Button/button';
import { ButtonSize, ButtonType } from './components/Button/interface';
import Alert from './components/Alert/alert';
import Menu, { MenuItem } from './components/Menu/menu';
import SubMenu from './components/Menu/subMenu';
import Tabs from './components/Tabs/tabs';
import TabItem from './components/Tabs/tabItem';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { fas } from '@fortawesome/free-solid-svg-icons';

import { library } from '@fortawesome/fontawesome-svg-core';
import Icon from './components/Icon/Icon';
import Transition from './components/Transition/transition';
import Input from './components/Input/input';
library.add(fas);

function App() {

  const [show, setShow] = useState(false);

  return (
    <div className="App">
      <div>
        <Button btnType='primary' onClick={() => setShow(!show)}>点击展开内容</Button>
        <Transition in={show} timeout={2000}>
          <div>
            <h1>Hello world</h1>
            <h2>Hello world</h2>
            <h3>Hello world</h3>
            <h4>Hello world</h4>
            <hr />
            <p>
              Edit <code>src/App.tsx</code> and save to reload.
            </p>
            <a
              href="https://reactjs.org"
              target="_blank"
              rel="noopener noreferrer"
            >
              Learn React
            </a>
          </div>
        </Transition>
      </div>
      <div style={{ margin: '10px' }}>
        <h1>Hello world</h1>
        <h2>Hello world</h2>
        <h3>Hello world</h3>
        <h4>Hello world</h4>
        <hr />
        <p>
          Edit <code>src/App.tsx</code> and save to reload.
        </p>
        <a
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
        <hr />
        <div style={{ display: 'flex', flexDirection: 'column', gap: '15px' }}>
          <div>
            <Button >默认按钮</Button>
            <Button size='lg' autoFocus>默认按钮</Button>
            <Button size='sm' onClick={() => { alert('点击按钮') }}>默认按钮</Button>
          </div>
          <div>
            <Button btnType='primary'>主按钮</Button>
            <Button btnType='default'>普通按钮</Button>
            <Button btnType='danger'>警告按钮</Button>
            <Button btnType='link' href='#' target='_blank'>链接按钮</Button>
          </div>
          <div>
            <Button btnType='primary' disabled>主按钮</Button>
            <Button btnType='default' disabled>普通按钮</Button>
            <Button btnType='danger' disabled onClick={() => { console.log('发生点击事件2') }}>警告按钮</Button>
            <Button btnType='link' href='#' disabled onClick={() => { console.log('发生点击事件') }}>链接按钮</Button>
          </div>
        </div>
        <hr />
        <div style={{ display: 'flex', flexDirection: 'column', gap: '15px' }}>
          <Alert
            closable
            message='Hello world!'
            description='nfo Description Info Description Info Description Info Description'
          />
          <Alert
            message='Hello world!'
            closable
          />
          <Alert
            type='success'
            message='Hello world!'
          />
          <Alert
            type='danger'
            message='Hello world!'
          />
          <Alert
            type='warning'
            message='Hello world!'
          />
        </div>
        <hr />
        <div>
          <Menu>
            <MenuItem>首页</MenuItem>
            <MenuItem>作品集</MenuItem>
            <SubMenu title="子菜单">
              <MenuItem>选项一</MenuItem>
              <MenuItem>选项二</MenuItem>
              <MenuItem>选项三</MenuItem>
            </SubMenu>
            <MenuItem disabled>关于我们</MenuItem>
            <MenuItem>常见问题</MenuItem>
          </Menu>
          <Menu mode='vertical'>
            <MenuItem>首页</MenuItem>
            <MenuItem>作品集</MenuItem>
            <MenuItem disabled>关于我们</MenuItem>
            <SubMenu title="子菜单" defaultOpenMenus>
              <MenuItem>选项一</MenuItem>
              <MenuItem>选项二</MenuItem>
              <MenuItem>选项三</MenuItem>
            </SubMenu>
            <MenuItem>常见问题</MenuItem>
          </Menu>
        </div>
        <hr />
        <div>
          <Tabs>
            <TabItem index='1' label='标签1'>标签1中的内容...</TabItem>
            <TabItem index='2' label='标签2'>标签2中的内容...</TabItem>
            <TabItem index='3' label='标签3' disabled>标签3中的内容...</TabItem>
          </Tabs>
          <hr />
          <Tabs mode='vertical'>
            <TabItem index='1' label='标签1'>标签1中的内容...</TabItem>
            <TabItem index='2' label='标签2'>标签2中的内容...</TabItem>
            <TabItem index='3' label='标签3' disabled>标签3中的内容...</TabItem>
          </Tabs>
        </div>
      </div>
      <hr />
      <div style={{ display: 'flex', gap: '15px' }}>
        <FontAwesomeIcon icon='coffee' size='lg' />
        <Icon icon='car' />
        <Icon icon='delete-left' theme='danger' />
      </div>
      <hr />
      <Input icon='car'/>
    </div>
  );
}

export default App;
